import { debounce } from 'lodash-es'
import { onMounted, onUnmounted, ref } from 'vue'

export default function useLandscape() {
  const envLandscape = ref(window.orientation === 90 || window.orientation === -90)

  const outerWidth = ref(window.outerWidth)

  const outerHeight = ref(window.outerHeight)
  // 横竖屏检测 =================================================================

  const event = 'onorientationchange' in window ? 'orientationchange' : 'resize'

  const eventHandler = debounce(() => {
    if (window.orientation === 180 || window.orientation === 0) {
      // alert('竖屏状态！');
      envLandscape.value = false
    }
    if (window.orientation === 90 || window.orientation === -90) {
      // alert('横屏状态！');
      envLandscape.value = true
    }
    setTimeout(() => {
      outerWidth.value = window.outerWidth

      outerHeight.value = window.outerHeight
    }, 250)
  }, 150)

  onMounted(() => {
    window.addEventListener(event, eventHandler, false)
  })

  onUnmounted(() => {
    window.removeEventListener(event, eventHandler, false)
  })

  return { envLandscape, outerWidth, outerHeight }
}
